{# Copyright The IETF Trust 2016, All Rights Reserved #}
<!DOCTYPE html>
{% load analytical %}
{% load origin %}
{% load static %}
{% load ietf_filters textfilters %}
{% load document_type_badge %}
{% load django_vite %}
{% origin %}
<html data-bs-theme="auto" lang="en">
    <head>
        {% analytical_head_top %}
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            {% if doc.type_id == "rfc" %}
                RFC {{ doc.rfc_number }} - {{ doc.title }}
            {% else %}
                {{ doc.name }}-{{ doc.rev }}
            {% endif %}
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{{ settings.STATIC_IETF_ORG }}/fonts/inter/import.css" rel="stylesheet">
        <link href="{{ settings.STATIC_IETF_ORG }}/fonts/noto-sans-mono/import.css" rel="stylesheet">
        {% if request.COOKIES.pagedeps == 'inline' %}
            <script>{{ js|safe }}</script>
            <style>{{ css|safe }}</style>
        {% else %}
            <link rel="stylesheet" href="{% static 'ietf/css/document_html_referenced.css' %}">
            {% if html %}
                <link rel="stylesheet" href="{% static 'ietf/css/document_html_txt.css' %}">
            {% endif %}
            {% vite_asset 'client/embedded.js' %}
            <script src="{% static 'ietf/js/document_html.js' %}"></script>
            <script src="{% static 'ietf/js/theme.js' %}"></script>
        {% endif %}
        <link rel="alternate" type="application/atom+xml" title="Document changes" href="/feed/document-changes/{{ doc.name }}/">
        <meta name="description"
            {% if doc.type_id == "rfc" %}
                content="{{ doc.title }} (RFC {{ doc.rfc_number }}, {{ published.time|date:'F Y' }}{% if obsoleted_by %}; obsoleted by {% for rel in obsoleted_by %}{{ rel.source.name|prettystdname}}{% if not forloop.last%}, {% endif %}{% endfor %}{% endif %})"
            {% else %}
                content="{{ doc.title }} (Internet-Draft, {{ doc.time|date:'Y' }})"
            {% endif %}>
        {% include "base/icons.html" %}
        {% include "doc/opengraph.html" %}
        {% analytical_head_bottom %}
        <style>
            {# Force "text-overflow: ellipsis" to hide the beginning of a doc name #}
            .diff-form .select2-selection__rendered {
                direction: rtl;
                text-align: left;
            }
        </style>
    </head>
    <body>
        {% analytical_body_top %}
        {% include "base/status.html" %}
        <div class="btn-toolbar sidebar-toolbar position-fixed top-0 end-0 m-2 m-lg-3 d-print-none">
            <div class="dropdown">
                <button class="btn btn-outline-secondary btn-sm me-1 dropdown-toggle d-flex align-items-center"
                    id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
                    aria-label="Toggle theme">
                        <i class="theme-icon-active bi bi-circle-half"></i>
                </button>

                <ul class="dropdown-menu" aria-labelledby="bd-theme">
                    <li>
                        <button type="button" class="dropdown-item d-flex align-items-center"
                            data-bs-theme-value="light" aria-pressed="false">
                            <i class="me-2 opacity-50 theme-icon bi bi-sun-fill"></i>
                            Light<i class="bi bi-check2 ms-auto d-none"></i>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item d-flex align-items-center"
                            data-bs-theme-value="dark" aria-pressed="false">
                            <i class="me-2 opacity-50 theme-icon bi bi-moon-stars-fill"></i>
                            Dark<i class="bi bi-check2 ms-auto d-none"></i>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item d-flex align-items-center active"
                            data-bs-theme-value="auto" aria-pressed="true">
                            <i class="me-2 opacity-50 theme-icon bi bi-circle-half"></i>
                            Auto<i class="bi bi-check2 ms-auto d-none"></i>
                        </button>
                    </li>
                </ul>
            </div>
            <button class="btn btn-outline-secondary btn-sm sidebar-toggle"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#sidebar"
                    aria-expanded="{% if request.COOKIES.sidebar != 'off'%}true{% else %}false{% endif %}"
                    aria-controls="sidebar"
                    aria-label="Toggle metadata sidebar"
                    title="Toggle metadata sidebar">
            <i class="bi bi-arrow-bar-left sidebar-shown"></i>
            <i class="bi bi-arrow-bar-right sidebar-collapsed"></i>
            </button>
        </div>
        <nav class="navbar bg-light-subtle px-1 fixed-top d-print-none d-md-none">
            <a class="nav-link ps-1"
               href="{% url 'ietf.doc.views_doc.document_main' name=doc.name %}">
                {% if doc.type_id == "rfc" %}
                    RFC {{ doc.rfc_number }}
                {% else %} 
                    {{ doc.name }}-{{ doc.rev }}
                {% endif %}
                <br class="d-sm-none">

                <span class="ms-sm-3 badge rounded-pill badge-{% if not snapshot %}{{ doc|std_level_to_label_format }}{% else %}draft{% endif %}">
                    {% if not snapshot %}
                        {{ doc.std_level }}
                    {% else %}
                        Internet-Draft
                    {% endif %}
                </span>
            </a>
            <button class="navbar-toggler p-1"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#docinfo-collapse"
                    aria-controls="docinfo-collapse"
                    aria-expanded="false"
                    aria-label="Show document information">
                <span class="navbar-toggler-icon small"></span>
            </button>
            <div class="navbar-nav navbar-nav-scroll overscroll-none collapse pt-1" id="docinfo-collapse">
                <div class="bg-light-subtle p-0">
                    <table class="table table-sm table-borderless small">
                        <tbody class="meta align-top">
                            <tr>
                                <th scope="row"></th>
                                <th scope="row">Title</th>
                                <td class="edit"></td>
                                <td>{{ doc.title }}</td>
                            </tr>
                        </tbody>
                        {% include "doc/document_info.html" with sidebar=False %}
                        <tr>
                            <th scope="row"></th>
                            <th scope="row"></th>
                            <td class="edit"></td>
                            <td>
                                <a class="btn btn-sm btn-warning mb-3"
                                target="_blank"
                                href="https://github.com/ietf-tools/datatracker/issues/new/choose">
                                    Report a bug
                                    <i class="bi bi-bug"></i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </nav>
        <div class="row g-0">
            <div class="col-md-9 d-flex justify-content-center lh-sm"
                 data-bs-spy="scroll"
                 data-bs-target="#toc-nav"
                 data-bs-smooth-scroll="true"
                 tabindex="0"
                 id="content">
                {% if html and request.COOKIES.htmlconf != 'txt' %}
                    <div class="rfchtml">
                        <br class="noprint">
                        {{ html|safe }}
                    </div>
                {% else %}
                    <div class="rfcmarkup">
                        <br class="noprint">
                        <!-- [html-validate-disable-block attr-quotes, void-style, element-permitted-content, heading-level -- FIXME: rfcmarkup/rfc2html generates HTML with issues] -->
                        {{ doc.htmlized|default:"Generation of htmlized text failed"|safe }}
                    </div>
                {% endif %}
            </div>
            <div class="d-print-none col-md-3 bg-light-subtle collapse{% if request.COOKIES.sidebar != 'off'%} show{% endif %}" id="sidebar">
                <div class="position-fixed border-start sidebar overflow-scroll overscroll-none no-scrollbar">
                    <div class="d-flex flex-column vh-100 pt-2 pt-lg-3 ps-3 pl-md-2 pl-lg-3">
                        <div>
                            <a class="btn btn-primary btn-sm" href="{% url 'ietf.doc.views_doc.document_main' name=doc.name %}">Datatracker</a>
                            <p class="fw-bold pt-2">
                                {% if doc.type_id == "rfc" %}
                                    RFC {{ doc.rfc_number }}
                                {% else %}
                                    {{ doc.name }}-{{ doc.rev }}
                                {% endif %}
                                <br>
                                {% document_type_badge doc snapshot submission resurrected_by %}
                            </p>
                        </div>
                        {% if request.COOKIES.htmlconf and request.COOKIES.htmlconf != 'html' and html %}
                        <div class="alert alert-info small">
                            You are viewing the legacy <code><a class="text-decoration-none text-reset" href="https://github.com/ietf-tools/rfc2html">rfc2html</a></code>
                            rendering of this document. Change the
                            preferences for a modern <code><a class="text-decoration-none text-reset" href="https://github.com/ietf-tools/xml2rfc">xml2rfc</a></code>-based
                            HTMLization.
                        </div>
                        {% elif request.COOKIES.htmlconf == 'html' and not html %}
                        <div class="alert alert-info small">
                            You are viewing the legacy <code><a class="text-decoration-none text-reset" href="https://github.com/ietf-tools/rfc2html">rfc2html</a></code>
                            rendering, because no <code><a class="text-decoration-none text-reset" href="https://github.com/ietf-tools/xml2rfc">xml2rfc</a></code>-generated
                            HTML is available for this document.
                        </div>
                        {% endif %}
                        <ul class="nav nav-tabs nav-fill small me-2" role="tablist">
                            <li class="nav-item" role="presentation" title="Document information">
                                <button class="nav-link px-2"
                                        id="docinfo-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#docinfo-tab-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="docinfo-tab-pane"
                                        aria-selected="true">
                                    <i class="bi bi-info-circle"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Info</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation" title="Table of contents">
                                <button class="nav-link px-2"
                                        id="toc-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#toc-tab-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="toc-tab-pane"
                                        aria-selected="false">
                                    <i class="bi bi-list-ol"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Contents</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation" title="Preferences">
                                <button class="nav-link px-2"
                                        id="pref-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#pref-tab-pane"
                                        type="button"
                                        role="tab"
                                        aria-controls="pref-tab-pane"
                                        aria-selected="false">
                                    <i class="bi bi-gear"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Prefs</span>
                                </button>
                            </li>
                        </ul>
                        <div class="overflow-auto tab-content pt-2 me-2">
                            <div class="tab-pane"
                                 id="docinfo-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="docinfo-tab"
                                 tabindex="0">
                                <table class="table table-sm table-borderless">
                                    {% include "doc/document_info.html" with sidebar=True %}
                                </table>
                                <a class="btn btn-sm btn-warning mb-3"
                                target="_blank"
                                href="https://github.com/ietf-tools/datatracker/issues/new/choose">
                                    Report a datatracker bug
                                    <i class="bi bi-bug"></i>
                                </a>
                            </div>
                            <div class="tab-pane mb-5"
                                 id="toc-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="toc-tab"
                                 tabindex="0">
                                <nav class="nav nav-pills flex-column small" id="toc-nav">
                                </nav>
                            </div>
                            <div class="tab-pane mb-5 small"
                                 id="pref-tab-pane"
                                 role="tabpanel"
                                 aria-labelledby="pref-tab"
                                 tabindex="0">
                                <label class="form-label fw-bold mb-2">Show sidebar by default</label>
                                <div class="btn-group-vertical btn-group-sm d-flex" role="group">
                                    <input type="radio" class="btn-check" name="sidebar" id="on-radio">
                                    <label class="btn btn-outline-primary" for="on-radio">Yes</label>
                                    <input type="radio" class="btn-check" name="sidebar" id="off-radio">
                                    <label class="btn btn-outline-primary" for="off-radio">No</label>
                                </div>
                                <label class="form-label fw-bold mt-4 mb-2">Tab to show by default</label>
                                <div class="btn-group-vertical btn-group-sm d-flex" role="group">
                                    <input type="radio" class="btn-check" name="deftab" id="docinfo-radio">
                                    <label class="btn btn-outline-primary" for="docinfo-radio">
                                        <i class="bi bi-info-circle me-1"></i>Info
                                    </label>
                                    <input type="radio" class="btn-check" name="deftab" id="toc-radio">
                                    <label class="btn btn-outline-primary" for="toc-radio">
                                        <i class="bi bi-list-ol me-1"></i>Contents
                                    </label>
                                </div>
                                <label class="form-label fw-bold mt-4 mb-2">HTMLization configuration</label>
                                <div class="btn-group-vertical btn-group-sm d-flex" role="group">
                                    <input type="radio" class="btn-check" name="htmlconf" id="txt-radio">
                                    <label class="btn btn-outline-primary" for="txt-radio" title="This is the traditional HTMLization method.">
                                        <i class="bi bi-badge-sd me-1"></i>HTMLize the plaintext
                                    </label>
                                    <input type="radio" class="btn-check" name="htmlconf" id="html-radio">
                                    <label class="btn btn-outline-primary" for="html-radio" title="This is the modern HTMLization method.">
                                        <i class="bi bi-badge-hd me-1"></i>Plaintextify the HTML
                                    </label>
                                </div>
                                <label class="form-label fw-bold mt-4 mb-2" for="ptsize">Maximum font size</label>
                                <input type="range" class="form-range" min="7" max="16" id="ptsize" oninput="ptdemo.value = ptsize.value">
                                <label class="form-label fw-bold mt-4 mb-2">Page dependencies</label>
                                <div class="btn-group-vertical btn-group-sm d-flex" role="group">
                                    <input type="radio" class="btn-check" name="pagedeps" id="inline-radio">
                                    <label class="btn btn-outline-primary" for="inline-radio" title="Generate larger, standalone web pages that do not require network access to render.">
                                        <i class="bi bi-box me-1"></i>Inline
                                    </label>
                                    <input type="radio" class="btn-check" name="pagedeps" id="reference-radio">
                                    <label class="btn btn-outline-primary" for="reference-radio" title="Generate regular web pages that require network access to render.">
                                        <i class="bi bi-link-45deg me-1"></i>Reference
                                    </label>
                                </div>
                                <label class="form-label fw-bold mt-4 mb-2">Citation links</label>
                                <div class="btn-group-vertical btn-group-sm d-flex" role="group">
                                    <input type="radio" class="btn-check" name="reflinks" id="refsection-radio">
                                    <label class="btn btn-outline-primary" for="refsection-radio" title="Citation links go to the reference section.">
                                        <i class="bi bi-arrow-clockwise"></i> Go to reference section
                                    </label>
                                    <input type="radio" class="btn-check" name="reflinks" id="citation-radio">
                                    <label class="btn btn-outline-primary" for="citation-radio" title="Citation links go directly to the cited document.">
                                        <i class="bi bi-link-45deg me-1"></i>Go to linked document
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% analytical_body_bottom %}
    </body>
</html>
